<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('流程进度跟踪')" />
    <style type="text/css">
    	html{background:#FFFFFF;}
    	.layui-card{background-color: #eee;margin-bottom: 0px;border: 1px solid #aaa;}
    	.center{margin-left: 50%;font-size:20px}
    </style>
</head>
<body>
<div class="layui-tab">
  <ul class="layui-tab-title flowBorder">
    <li class="layui-this">实时流程图</li>
    <li>流程审批进度</li>
  </ul>
  <div class="layui-tab-content" style="width:90%;margin-left:5%;margin-top:10px;">
    <div class="layui-tab-item layui-show" style="text-align:center;margin-top:15px;">
    	<img id="showImg" style="vertical-align: middle;">
    </div>
    <div class="layui-tab-item" id="context2" th:with="actList=${historicActivityList}">
      <div th:each="actObj:${actList}">
    	<div class="layui-card" style="box-shadow:3px 3px 2px 1px rgba(0, 0, 15, 0.29);">
			<div class="layui-card-body"><span style="color: #1a7bb9;font-size: 16px;font-weight:400;" th:text="'任务环节：'+${actObj.activityName}+(${actObj.owner}?'【'+${actObj.ownerName}+'('+${actObj.owner}+')委托处理】':'')"></span><br/>
			  <span th:text="'任务状态：'+${actObj.resultStatusName}"></span><br/>
              <span th:text="'执&nbsp;&nbsp;行&nbsp;&nbsp;者：'+${actObj.assigneeName}"></span><br/>
              处理时间：<span th:if="${not #strings.isEmpty(actObj.endTimeFormat)}" th:text="${actObj?.endTimeFormat}"></span><br/>
              处理备注：<span th:if="${not #strings.isEmpty(actObj.comment)}" th:text="${actObj?.comment}"></span><br/>
			</div>
		</div>
		<i class="dhicon dh-arrow-down center"></i>
      </div>
	</div>
  </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: motif-alter" />
<script th:inline="javascript">
	/*<![CDATA[*/
	var prefix = ctx + "flowable/process";
	var instanceId = [[${instanceId}]];
	/*]]>*/
</script>
<script type="text/javascript">
  var $,layer,form,table,laydate,element;//定义layui模块
  layui.use(['layer','jquery','util','element'], function () {
 	$ = layui.$,layer = layui.layer,util = layui.util,element=layui.element;
 	layui.element.render();
  });
  $(function() {
	  var imgUrl =  prefix + '/getProcessImg/' + instanceId;
	  $('#showImg').attr('src', imgUrl);
      $('.center')[$('.center').length-1].remove();
  });
</script>
</body>
</html>